<template>
  <div class="contentShadow">
    <el-container>
      <el-header>
        <h1>导入志愿时长</h1>
      </el-header>
      <el-main>
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
          <el-table-column prop="id" label="序号" type="index" :index="indexMethod" align="center">
          </el-table-column>
          <el-table-column prop="studentId" label="学号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="volunteerLength" label="志愿时长" align="center">
          </el-table-column>


        </el-table>
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[1, 2, 4, 8]" :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="tableData.length">
          </el-pagination>
        </div>
        <div class="button">
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                     :on-exceed="handleExceed"
                     :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">请上传学生名单</div>
          </el-upload>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  methods: {

    // id自增
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },

    // 分页控制器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.currentPage = val;
    },

    // 上传按钮
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }

  },
  data() {
    return {

      // 上传按钮
      fileList: [{
        name: '求知一苑.xls',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: '求进医院.xlsx',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],


      // 分页控制器
      currentPage: 1,
      pageSize: 2,

      // 表格数据
      tableData: [{
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      }, {
        studentId: "222",
        name: "王九蛋",
        volunteerLength: 100,

      },],


    };
  }
}
</script>
<style>
@import '../../style/contentShadow.css';

.pagination {
  margin: 20px;
}
</style>
